<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="" style="height: 120upx;">

		</view>
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<view class="carousel-money">
				{{hasmoney}}
			</view>
			<view class="carousel-text">
				余额 （元）
			</view>
		</view>
		<!-- 快捷方式 -->
		<!-- <view class="cate-section">
			<view class="cate-item" @tap="withdraw">
				<image class="cate-item-img" src="@/static/images/tixian.png"></image>
				<image class="you" src="@/static/images/xiangyou.png"></image>
				<text class="cate-item-text">提现</text>
			</view>
			<!-- <view class="cate-item" @tap="withdrawRecord">
				<image class="cate-item-img" src="@/static/images/tixianmingxi.png"></image>
				<image class="you" src="@/static/images/xiangyou.png"></image>
				<text class="cate-item-text">提现记录</text>
			</view> -->
		<!-- <view class="cate-item" @tap="moneyChange">
				<image class="cate-item-img" src="@/static/images/gongzimingxi.png"></image>
				<image class="you" src="@/static/images/xiangyou.png"></image>
				<text class="cate-item-text">工资明细</text>
			</view>
		</view> -->
		<view class="cate-section">
			<view class="cate-item" @tap="withdraw" style="background-color: #449bfd;">
				<image class="cate-item-img" src="/static/images/qutixian.png" style=""></image>
				<text class="cate-item-text">去提现</text>
			</view>

			<view class="cate-item" @tap="banks" style="background-color: #ffa702;">
				<image class="cate-item-img" src="/static/images/yinhangka.png" style=""></image>
				<text class="cate-item-text">银行卡</text>
			</view>

			<view class="cate-item" @tap="moneyChange" style="background-color: #fe515f;">
				<image class="cate-item-img" src="/static/images/gongzimingxi.png" style=""></image>
				<text class="cate-item-text">工资明细</text>
			</view>
			<!-- <view class="cate-item" @tap="withdrawRecord">
				<image class="cate-item-img" src="@/static/images/tixianmingxi.png"></image>
				<image class="you" src="@/static/images/xiangyou.png"></image>
				<text class="cate-item-text">提现记录</text>
			</view> -->
			<!-- <view class="cate-item" @tap="moneyChange">
				<image class="cate-item-img" src="@/static/images/gongzimingxi.png"></image>
				<image class="you" src="@/static/images/xiangyou.png"></image>
				<text class="cate-item-text">工资明细</text>
			</view> -->
		</view>
		<view class="mark" v-show="isShow">
			<view class="banks-list">
				<view class="banks-list-title">
					<text>选择提现方式</text>
					<image src="@/static/images/guanbi.png"
						style="width:23rpx;height:23rpx;position: absolute;right:50rpx;" @tap="cancle"></image>
				</view>
				<view class="banks-list-content">
					<view class="banks-list-item" @tap="selectType(1)">
						支付宝余额
						<text style="color: red;">(实时到账，推荐)</text>
					</view>
					<view class="banks-list-item" @tap="selectType(2)">
						银行卡
					</view>
					<!-- <view class="banks-list-item" @tap="selectType(3)">
						微信领钱
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
				title: '我的工资',

				cate: 1,
				hasmoney: '0.00',
				isShow: false,
			};
		},
		components: {

		},
		// computed: {
		// 	...mapState(['hasLogin']),
		// },
		//下拉刷新
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}
			this.loadData();
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)

		},
		async onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.loadData();

			uni.$on('changeHasmoney', () => {
				this.loadData();
			})
		},
		methods: {
			async loadData() {
				let token = uni.getStorageSync('token');
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: 1,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;
				this.hasmoney = parseFloat(info.hasmoney).toFixed(2);
			},

			//提现
			withdraw() {
				this.isShow = true;

			},

			async cancle() {
				this.isShow = false;
			},

			selectType(type) {
				switch (type) {
					case 1:
						uni.navigateTo({
							url: '/pages2_1/pages/withdraw/alipay_withdraw'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages2_1/pages/withdraw/withdraw'
						})
						break;
				}
			},

			//找劳务
			withdrawRecord() {
				uni.navigateTo({
					url: '/pages2_1/pages/withdrawl-record/withdrawl-record'
				})
			},

			banks() {
				uni.navigateTo({
					url: '/pages2_1/pages/banks/bank_list'
				})
			},

			//财务流水
			moneyChange() {
				uni.navigateTo({
					url: '/pages2/pages/financial-flow/financial-flow'
				})
			},

		},

	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: 30upx;
	}
</style>
<style lang="scss" scoped>
	/* 头部 */
	.carousel-section {
		position: relative;
		height: 300rpx;
		width: 94%;
		margin: 0 auto;
		border-radius: 20upx;
		background-color: #f3431a;
		// #ifdef APP-PLUS
		margin-top: 60rpx;
		// #endif

		// #ifdef H5
		// padding-top: 108rpx;
		// #endif

		// #ifdef MP-WEIXIN
		margin-top: 60rpx;
		// #endif
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-bottom: 42upx;

		.carousel-money {
			font-size: 60rpx;
		}
	}

	/* 快捷方式 */
	.cate-section {
		width: 94%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.cate-item {
			width: 218upx;
			height: 158upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 20upx;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;

			.cate-item-img {
				width: 70upx;
				height: 70upx;
				margin: 22upx 0 14upx;
			}

			.cate-item-text {
				font-size: 28upx;
				color: #FFFFFF;
			}
		}
	}

	.you {
		width: 11rpx;
		height: 20rpx;
		position: absolute;
		right: 42rpx;
		top: 36rpx;
	}

	.mark {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0rpx;
		bottom: 0rpx;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 2px -3px 100px -5px #FFFFFF;

		.banks-list {
			position: absolute;
			height: 280rpx;
			bottom: 0rpx;
			background-color: #fff;
			width: 100%;

			.banks-list-title {
				height: 102rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #ebebeb;
				position: relative;
			}

			.banks-list-content {
				padding: 30rpx 0;

				.banks-list-item {
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: center;
				}

			}

			.banks-list-button {
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
